<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>忘记密码</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <link rel="stylesheet" type="text/css" href="/gradesign/css/bootstrap.min.css"/>
    <style type="text/css">
        body{
            background-image: linear-gradient(180deg, rgba(27,31,35,0.065), rgba(27,31,35,0)) !important;
            background-repeat: no-repeat;
            background-size: 100%;
        }
        .main{width: 50% !important;align-content: center;margin-left: 25%;}
        .main-header{text-align: center;margin-top: 50px}
        .lead{font-size: 20px;font-weight: 300;color: #586069}
        .steps{display: table;width: 100%;text-align:center;padding:0px;margin-left: 65px; overflow: hidden;float: left; position: relative;list-style:none;}
        .steps li{float: left;list-style:none;border:1px solid #dfe2e5;border-radius:5px;padding-left:15px;padding-right:47px;padding-top:8px;padding-bottom: 8px;width: 68%;margin-left: 6%;}
        .step{font-size: 20px;font-weight: 300;color: #586069}
        .form-group {margin: 10px 60px}
        .form-label{text-align: left !important;}
        .form-reg{border:solid 1px #d8dee2;margin-left: 15.5%;margin-top:100px;border-radius:5px;margin-right: 65px;width:68%;}
        .form-footer{margin-bottom: 40px}
    </style>
</head>
<body>
    <div class="main" id="main">
            <div class="main-setup setup-org">
                <ol class="steps" >
                    <li class="current">
                            <svg t="1513834285561" class="icon" style="color: #00a7d0" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4381" xmlns:xlink="http://www.w3.org/1999/xlink" width="35" height="35">
                                <defs><style type="text/css"  ></style></defs>
                                <path style="fill:#6666ff;fill-rule:nonzero;" d="M1007.133225 504.308982 511.72545 52.850914 17.4231 503.218006c-9.88742 8.785606-9.88742 29.658647-1.101813 39.538841 8.785606 9.88742 29.662259 9.88742 39.549679 1.101813L511.72545 129.743033l455.858096 416.308417c4.396416 4.400028 12.091046 6.592817 21.964016 6.592817 7.694631 0 13.182022-2.192789 17.58205-7.683793C1017.017032 535.073054 1015.915219 513.105426 1007.133225 504.308982L1007.133225 504.308982zM825.890355 543.855048l0 367.98397-181.253708 0 0-266.931433-265.818782 0 0 266.931433L197.564157 911.839018 197.564157 543.855048c0-30.753235-59.310068-30.753235-59.310068 0l0 427.29765 298.775644 0 0-268.022409 149.395047 0 0 268.022409 298.779256 0L885.204036 543.855048C885.204036 513.105426 825.890355 513.105426 825.890355 543.855048L825.890355 543.855048zM687.477316 175.871079l143.90043 0 0 127.420193c0 31.855048 48.331673 31.855048 48.331673 0L879.709419 128.641219l-191.126677 0c-13.182022 0-24.171255 9.88742-24.171255 24.160418C663.320511 165.983659 674.298906 175.871079 687.477316 175.871079z" p-id="4382">
                                </path>
                            </svg>
                            <strong class="step"></strong>忘记密码
                    </li>
                </ol>
            </div>
            <div class="form-reg" id="form-reg-home">
                <table id="reg-home">
                    <div class="form-group form-title">
                        <label class="form-label">忘记密码</label>
                    </div>
                    <div class="form-group">
                        <input type="text" name="familyaccount" id="familyaccount" class="form-control"  placeholder="家庭账户"/>
                    </div>
                    <div class="form-group">
                        <input type="text" name="validationCode" id="validationCode" class="form-control"  placeholder="验证码"/>
                    </div>
                    <div class="form-group">
                        <button class="btn btn-primary btn-large f4 btn-block  btn-submit" onclick="sendEmailValidation()">发送验证码</button>
                    </div>
                    <div class="form-group">
                        <button class="btn btn-primary btn-large f4 btn-block  btn-submit" onclick="validateCode()">更改密码</button>
                    </div>
                    <div class="form-group form-footer">
                        <span class="reg-home-tip"><a href="/gradesign/login/login">已修改家庭密码，去登陆</a> </span>
                    </div>
                </table>
            </div>
    </div>
    <div class="foot"></div>
    <div class="modal fade" id="changePwd" tabindex="-1" role="dialog">
	  <div class="modal-dialog" role="document">
	    <div class="modal-content">
	      <div class="modal-header">
	        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
	        <h4 class="modal-title">Modal title</h4>
	      </div>
	      <div class="modal-body">
	        <div class="form-group">
			  <input type="text" id="password" class="form-control" placeholder="密码" aria-describedby="password"/>
			</div>
			<div class="form-group">
			  <input type="text" id="repassword" class="form-control" placeholder="重复密码" aria-describedby="repassword"/>
			</div>
	      </div>
	      <div class="modal-footer">
	        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
	        <button type="button" class="btn btn-primary" onclick="changePwd()">修改密码</button>
	      </div>
	    </div><!-- /.modal-content -->
	  </div><!-- /.modal-dialog -->
	</div><!-- /.modal -->
</body>
<script type="text/javascript" src="/gradesign/js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="/gradesign/js/bootstrap.min.js"></script>
<script type="text/javascript">
	function sendEmailValidation(){
		var familyaccount = $("#familyaccount").val();
		var param = {};
		param.familyaccount = familyaccount;
		$.ajax({
			url : "/gradesign/family/sendEmailValidation",
			method : "post",
        	data : param,
        	dataType:"json"
		})
	};
	function validateCode(){
		var password = $("#password").val();
		var repassword = $("#repassword").val();
		var familyaccount = $("#familyaccount").val();
		var param = {};
		param.password = password;
		param.familyaccount = familyaccount;
		//页面填报
		var validationCode = $("#validationCode").val();
		//后台获取
		var familyemailvalidation = null;
		$.ajax({
			url : "/gradesign/family/getValidationCode",
			method : "post",
        	data : param,
        	dataType:"json",
        	success : function(data){
        		familyemailvalidation = data;
        		if(familyemailvalidation == validationCode){
        			$('#changePwd').modal('show');
        		}else{
        			alert("家庭账户或验证码输入错误，请确认后再试！");
        		}
        	}
		})
	}
	function changePwd(){
		var password = $("#password").val();
		var repassword = $("#repassword").val();
		var familyaccount = $("#familyaccount").val();
		var param = {};
		param.password = password;
		param.familyaccount = familyaccount;
		//页面填报
		var validationCode = $("#validationCode").val();
		if(password == repassword){
			$.ajax({
				url : "/gradesign/family/changePwd",
				method : "post",
	        	data : param,
	        	dataType:"json",
	        	success : function(data){
	        		if(data.result == "success"){
	        			$('#changePwd').modal('hide');
	        			alert("密码修改成功");
	        			setInterval(window.location.href="/gradesign/login",2000);
	        		}
	        	}
			})
		}
	}
</script>
</html>